<template>
	<view class="navigator">
		<c-status-bar />
			<swiper indicator-dots :duration="300" indicator-active-color='#fff' indicator-color='#535456'
				indicator-dots-style="indicatorStyle" @change='swiperChange' ref="mySwiper" :current='current'>
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiperItem">
						<view class="img" :style="{paddingTop:'30rpx'}">
							<image class="swiperImg" :src="item.img"
								></image>
						</view>
						<view class="box">
							<text class="title">{{item.title}}</text>
							<view class="content">
								<text>{{item.content1}}</text>
							</view>
							<u-button type="primary" class="button" v-if="current==swiperList.length-1"  @click="toIndex">
								<image src="../../static/images/next.png" style="height: 50rpx;width: 60rpx;" mode="aspectFit"></image>
							</u-button>
							<view  style="height: 72px;" v-else>
								
							</view>
						
						</view>
					</view>
				</swiper-item>
			</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperList: [{
						title: this.$t(`navigator['Discount']`),
						content1: this.$t(`navigator['Publish']`),
						img: '../../static/images/swiper1.png'
					},
					{
						title: this.$t(`navigator['Offer Shopping']`),
						content1: this.$t(`navigator['traffic']`),
						img: '../../static/images/swiper2.png'
					},
					
				],
				current: 0,
			};
		},
		methods: {
			swiperChange(e) {
				this.current = e.detail.current
			},
			slideTo(index) {
				this.current++
			},
      toIndex(){
				 uni.reLaunch({
				     url: "/pages/home/home"
				 })
      }
		},
    onLoad(query) {
      // if(this.vuex_token){
      //   this.$u.utils.toPath('/pages/index/index')
      // }
    }
  }
</script>

<style lang="scss" scoped>
	.navigator{
		background-color: #1B1D29;
		height: 100vh;
		.swiperItem {
			height: 100vh;
			font-size: 27rpx;
			font-style: normal;
			font-weight: 600;
			line-height: 36px;
			
			.img {
				width: 100%;
				height: 50%;
				display: flex;
				justify-content: center;
				
				.swiperImg {
				
					height: 100%;
					width: 90%;
				}
			}
		
			.box {
				position: absolute;
				bottom: 0;
				z-index: 999;
				display: flex;
				flex-direction: column;
				font-size: 54rpx;
				// background: rgba(5, 8, 16, 0.4);
				border-radius: 64rpx 64rpx 0 0;
				font-family: Inter-Semi Bold-Regular, Inter-Semi Bold;
				color: #fff;
				padding: 48rpx 32rpx 50rpx 32rpx;
				
				
				.title{
				font-family:SFUIDisplay-Regular-Regular;
				font-weight: lighter;
				font-size: 60rpx;
				}
		
				.content {
					width: 92vw;
					display: flex;
					flex-direction: column;
					padding-top: 16rpx;
					color: #91909A;
					font-size: 32rpx;
					font-family: Inter-Regular, Inter;
					font-weight: 400;
					line-height: 1.8;
				}
		
				.button {
					margin-top: 128rpx;
					height: 140rpx;
					background-color: #2934D0 ;
					width: 140rpx;
					font-family: Inter-Semi Bold-Regular, Inter-Semi Bold;
					font-size: 32rpx;
					border-radius: 50%;
					margin-bottom: 30rpx;
					margin-right: 20rpx;
				}
			}
		}
		
		/deep/ .uni-swiper-dots {
			position: absolute;
			bottom: 140rpx;
			left: 80rpx;
			
		}
		
		/deep/ .uni-swiper-dot-active {
			padding: 0 12rpx;
			border-radius: 30rpx;
		}
		
		/deep/ .uni-swiper-wrapper {
			height: 95vh;
		}
	}
	

	
</style>
